<template>
  <div>
    <basic-dialog
      :visible="visible"
      :submitDisable="tableDataFilter.length === 0"
      min-width="864px"
      isShowClose
      is-show-basic-footer
      @close="handleClose"
      @submit="handleOk"
      title="添加设备">
      <q-form
        greedy
        class="dialog-content block">
        <div class="flex margin-t-20 form-inline" style="padding: 0">
          <div class="form-name margin-l-20 margin-r-20" style="line-height: 32px">所在车间: {{workshopName}}</div>
          <select-tooltip
            v-model="queryParams.lineId"
            isShowAll
            :multiple="false"
            :options="LinesOptions"
            msg="所在产线"
          ></select-tooltip>
        </div>
        <q-table
          selection="single"
          :selected.sync="selected"
          :data="tableDataFilter"
          :columns="columns"
          row-key="id"
          class="myTable scroll scrollbar"
          :loading="isTableLoading"
          :hide-bottom="tableDataFilter.length !== 0"
          no-data-label="暂无数据"
          :pagination.sync="pagination"
          color="primary"
          style="max-height: 400px"
        >
          <template v-slot:no-data>
            <div class="full-width row flex-center font-size-14" style="color: #999">
              暂无数据
            </div>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props">
              <q-td auto-width>
                <q-radio dense v-model="selected[0]" :val="props.row.id" />
              </q-td>
              <q-td>
                {{ props.row.assetNumber || '--' }}
              </q-td>
              <q-td>
                {{ props.row.name || '--'}}
              </q-td>
              <q-td>
                {{ props.row.deviceTypeName || '--' }}
              </q-td>
              <q-td>
                {{ props.row.model || '--' }}
              </q-td>
              <q-td>
                {{ props.row.workShopName || '--' }}
              </q-td>
            </q-tr>
          </template>
        </q-table>
<!--        <div style="width: 100%;padding-top: 20px">-->
<!--          <pagination-->
<!--            style="position: relative;padding: 0 20px"-->
<!--            v-model="pagination.page"-->
<!--            :page-size="pagination.rowsPerPage"-->
<!--            :total="totalFilter"-->
<!--            @changePage="onPageChange"-->
<!--            @changePageSize="onPageSizeChange">-->
<!--          </pagination>-->
<!--        </div>-->
      </q-form>
    </basic-dialog>
  </div>
</template>

<script>
// import Pagination from 'src/components/pagination'
import { getLinesByWorkshop, getNotSetDeviceCamera } from '../../../../boot/status-monitor/machine'

export default {
  name: 'AddOrEditEquipmentDialog',
  components: {
    // Pagination
  },
  props: {
    workshop: {
      type: [Number, String],
      default: ''
    },
    workshopName: {
      type: String,
      default: ''
    },
    selDevice: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      queryParams: {
        lineId: 'all'
      },
      LinesOptions: [],
      visible: false,
      isTableLoading: false,
      tableData: [],
      selected: [],
      columns: [
        { name: 'assetNumber', label: '设备编号', align: 'left', field: 'assetNumber' },
        { name: 'name', label: '设备名称', align: 'left', field: 'name' },
        { name: 'deviceTypeName', label: '设备类型', align: 'left', field: 'deviceTypeName' },
        { name: 'model', label: '设备型号', align: 'left', field: 'model' },
        { name: 'workShopName', label: '所在位置', align: 'left', field: 'workShopName' }
      ],
      pagination: {
        page: 1, // 当前页码
        rowsPerPage: 15, // 每页条数
        rowsNumber: 0 // 总条数
      }
    }
  },
  watch: {
    tableDataFilter () {
      this.selected = this.tableDataFilter.length > 0 ? [this.tableDataFilter[0].id] : []
    },
    workshop (val) {
      if (val) {
        this.getLines(val)
      }
    },
    'queryParams.lineId' (val) {
      if (val) {
        this.getTable()
      }
    }
  },
  computed: {
    tableDataFilter () {
      if (this.selDevice.length === 0) {
        return this.tableData
      }
      return this.tableData.filter(item => {
        return this.selDevice.findIndex(sel => sel.deviceId === item.id) === -1
      })
    },
    totalFilter () {
      if (this.selDevice.length === 0) {
        return this.pagination.rowsNumber
      }
      let count = 0
      this.tableData.forEach(item => {
        if (this.selDevice.findIndex(sel => sel.deviceId === item.id) > -1) count++
      })
      return this.pagination.rowsNumber - count
    }
  },
  methods: {
    showDialog () {
      this.visible = true
      Object.assign(this.queryParams, this.$options.data().queryParams)
      this.getTable()
    },
    handleClose () {
      this.visible = false
    },
    getLines (id) {
      getLinesByWorkshop(id).then(res => {
        if (res.data.length) {
          this.LinesOptions = res.data.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
          this.queryParams.lineId = 'all'
        }
        this.isShowInnerLoading = false
      })
    },
    getTable () {
      this.tableData = []
      const params = {
        workshopId: this.workshop,
        lineId: this.queryParams.lineId === 'all' ? '' : this.queryParams.lineId
        // pageSize: this.pagination.rowsPerPage,
        // pageNum: this.pagination.page,
        // deviceTypeCodes: this.queryParams.deviceType === 'all' ? '' : this.queryParams.deviceType,
        // keyWord: deviceName ? deviceName.label : ''
      }
      this.isTableLoading = true
      getNotSetDeviceCamera(params).then(res => {
        this.tableData = res.data
        // this.pagination.rowsNumber = res.total
      }).finally(() => {
        this.isTableLoading = false
      })
    },
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getTable()
    },
    onPageChange: function (val) {
      this.pagination.page = val
      this.getTable()
    },
    handleOk () {
      const selectId = this.selected[0]
      const selectRow = this.tableData.find(item => item.id === selectId)
      this.visible = false
      this.$emit('success', selectRow)
    },
    onSubmit () {
      this.getTable()
    },
    resetSearch () {
      Object.assign(this.queryParams, this.$options.data().queryParams)
    }
  }
}
</script>

<style scoped lang="stylus">
</style>
